<template>
    <div>
        <el-card>
            <el-page-header content="轮播列表" icon="" title="轮播管理"></el-page-header>
            <el-table :data="tableData" height='600px' style="width: 100%">
                <el-table-column prop="carouselTitle" label="标题" width="200"></el-table-column>
                <el-table-column  prop="carouselAddress" label="轮播图" width="150">
                    <template  #default="scope">
                        <img class="the_img" :src="scope.row.carouselAddress">
                    </template>
                </el-table-column>
               
                <el-table-column prop="carouselTime" label="更改时间" >
                    <template #default="scope">
                        {{ formatTime.getTime(scope.row.carouselTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small"  @click="handleEdit(scope.$index,scope.row)"
                        >编辑</el-button>
                        <el-popconfirm title="你确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消"
                        @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button size="small" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog
        title="修改轮播"
        v-model="dialogVisible"
        width="30%"
        >
            <el-form
            :model="carouselForm"
            :rules="carouselFormRules"
            ref="carouselFormRef"
            label-width="80px"
            >
                <el-form-item label="标题" prop="carouselTitle">
                    <el-input v-model="carouselForm.carouselTitle"></el-input>
                </el-form-item>
                <el-form-item label="轮播图">
                    <div class="box-card">
                        <img class="the_img" :src="carouselForm.carouselAddress" alt="">
                        <div class="btn-box">
                            <input type="file" accept="image/*" style="display: none" id="iptRef" @change="onFileChange" />
                            <el-button type="primary" icon="el-icon-plus" @click="chooseImg">选择图片</el-button> 
                        </div>
                    </div>
                </el-form-item> 
                         
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click='handleEditConfirm()'>确 定</el-button>
                </span>
            </template>
        </el-dialog>

        
    </div>
</template>

<script setup>
import {ref,onMounted,reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {allCarouselAPI,deleteCarouselAPI,editCarouselAPI} from '@/api'
import formatTime from '@/until/formatTime'

const carouselFormRef=ref()
let carouselForm=reactive({
    carouselTitle:'',
    carouselAddress:'',
    carouselTime:"",
    carouselId:''
})

const carouselFormRules=reactive({   
    carouselAddress: [{ required: true, message: '请上传图片', trigger: 'blur' }],
})
const tableData=ref([])
onMounted(()=>{
    getAllCarousel()
})
// 获取全部轮播信息
const getAllCarousel=async()=>{
    const {data:res}=await allCarouselAPI()
    if(res.status===0) tableData.value=res.carouselInfo
}

// 删除按钮
const handleDelete=async (row)=>{
    const {data:res}=await deleteCarouselAPI(row.carouselId)
    if(res.status===0){
        ElMessage.success('删除成功')
        return getAllCarousel()
    }else{
        return ElMessage.error('删除失败')
    }
}

const dialogVisible=ref(false)
// 编辑按钮
const handleEdit=(index,row)=>{
    dialogVisible.value=true
    carouselForm=row    
}
// 编辑确认按钮
const handleEditConfirm=()=>{
    carouselFormRef.value.validate(async valid=>{
        if(valid){
            const {data:res}=await editCarouselAPI(carouselForm)
            console.log(carouselForm);
            if (res.status !== 0 ) {
                ElMessage.error('更新失败');
                return
            }
            ElMessage.success('更新成功')
            dialogVisible.value=false
            console.log("编辑",res)
        }
    })
}

// 编辑图片
const chooseImg=function () {
    // 模拟点击行为
    document.getElementById('iptRef').click()
  }
const onFileChange=function (e) {
    const files = e.target.files // 选择的文件数组
    console.log(files);
    if (files.length === 0) {
     
    } else {
      // 解决方案2：文件->base64字符串（此字符串是可以发给后台的）
      const fr = new FileReader()
      fr.readAsDataURL(files[0]) // 传入文件对象开始读
      fr.onload = (e) => { 
        carouselForm.carouselAddress = e.target.result // 赋予给变量，让他显示在img的src里
      }
    }
  }
</script>

<style lang="scss" scoped>
.el-table{
    margin-top:50px
}
 
.the_img{
    width: 50px;
    height: 50px;
}
</style>
